<template>
	<div class="comp">
		{{title}}
		<br/>
		<optionContent/>
		<br/>
		<slot name="middle" :slot-data="slotData"></slot>
	</div>
</template>

<script>
	
	export default {
		name: 'comp',
		data() {
			return {
				slotData: {
					slotName: 'xxx',
					user: 'fywang'
				}
			}
		},
		props: {
			title: String,
			renderContent: Function
		},
		components: {
			optionContent: {
				props: {
					option: Object
				},
				/*eslint-disable no-unused-vars*/
				render(h) {
					const $parent = this.$parent;
					const obj = {
						name: 'fywang',
						age: 28
					};
					const vnode = $parent.renderContent 
									? $parent.renderContent(h, obj)
									: $parent.$scopedSlots.default 
										? $parent.$scopedSlots.default(obj)
										: <span>{obj.name}---{obj.age}</span>
					return vnode;
				}
			}
		}
	}
</script>

<style></style>